<template>
    <div class="houseBox">
        <el-dialog title="房屋信息" :visible.sync="dialogHouse" :before-close="close" width="750px">
            <table>
                    <tr>
                        <td>小区名称</td>
                        <td>
                            <el-input v-model="form.D004.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>预估市值</td>
                        <td>
                            <el-input v-model="form.D008.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>房产所在区域</td>
                        <td>
                            <el-select v-model="form.D001.provinceCode" @change="getCityList(2,form.D001.provinceCode,'add','D001')" class="w100">
                                <el-option v-for="(item,index) in provinceList" :key="index" :label="item.area_name" :value="item.id" />
                            </el-select>
                            <el-select v-model="form.D001.cityCode" @change="getCityList(3,form.D001.cityCode,'add','D001')" class="w100">
                                <el-option v-for="(item,index) in city6.cityList" :key="index" :label="item.area_name" :value="item.id" />
                            </el-select>
                            <el-select v-model="form.D001.areaCode" class="w180">
                                <el-option v-for="(item,index) in city6.areaList" :key="index" :label="item.area_name" :value="item.id" />
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>土地性质</td>
                        <td>
                            <el-select v-model="form.D002.itemValue" class="w240">
                                <el-option label="划拨" value="1" />
                                <el-option label="出让" value="2" />
                                <el-option label="工业用地" value="3" />
                                <el-option label="集体土地" value="4" />
                                <el-option label="商业用地" value="5" />
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>是否有阁楼/跃层</td>
                        <td>
                            <el-radio v-model="form.D003.itemValue" label="0">否</el-radio>
                            <el-radio v-model="form.D003.itemValue" label="1">是</el-radio>
                        </td>
                    </tr>
                    <tr>
                        <td>房屋面积</td>
                        <td>
                            <el-input v-model="form.D005.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>房屋建成年代</td>
                        <td>
                            <el-date-picker v-model="form.D006.itemValue" type="month" value-format="yyyy-MM" placeholder="选择年月"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>现在状态(装修状态)</td>
                        <td>
                            <el-select v-model="form.D007.itemValue" class="w240">
                                <el-option label="简装" value="1" />
                                <el-option label="豪装" value="2" />
                                <el-option label="毛胚" value="3" />
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>能否提供二套房证明</td>
                        <td>
                            <el-radio v-model="form.D009.itemValue" label="0">否</el-radio>
                            <el-radio v-model="form.D009.itemValue" label="1">是</el-radio>
                        </td>
                    </tr>

                    <tr>
                        <td>房产是否共同所有</td>
                        <td>
                            <el-radio v-model="form.D021.itemValue" label="0">否</el-radio>
                            <el-radio v-model="form.D021.itemValue" label="1">是</el-radio>
                        </td>
                    </tr>


                    <tr>
                        <td>共同所有是否可签字</td>
                        <td>
                            <el-radio v-model="form.D022.itemValue" label="0">否</el-radio>
                            <el-radio v-model="form.D022.itemValue" label="1">是</el-radio>
                        </td>
                    </tr>

                    <tr>
                        <td>房屋类型</td>
                        <td>
                            <el-select v-model="form.D010.itemValue" class="w240">
                                
                                <el-option label="住宅" value="0" />
                                <el-option label="商铺" value="1" />
                                <el-option label="70年产权公寓" value="2" />
                                <el-option label="非70年产权公寓" value="3" />
                                <el-option label="写字楼" value="4" />
                                <el-option label="厂房" value="5" />
                                <el-option label="其他" value="6" />

                            </el-select>
                        </td>
                    </tr>

                    <tr>
                        <td>房产证状态</td>
                        <td>
                            <el-select v-model="form.D020.itemValue" class="w240">
                                <el-option label="未拿到产证" value="1" />
                                <el-option label="持证未满三个月" value="2" />
                                <el-option label="持证已满三个月" value="3" />
                                <el-option label="持证已满六个月" value="5" />
                                <el-option label="持证已满一年" value="4" />
                            </el-select>
                        </td>
                    </tr>

                    <tr>
                        <td>房产证明材料</td>
                        <td>
                            <el-select v-model="form.D011.itemValue" class="w240">
                                <el-option label="产证" value="0" />
                                <el-option label="购房或按揭合同" value="1" />
                            </el-select>
                        </td>
                    </tr>
              <!--      <tr>
                        <td>房屋当前状态</td>
                        <td>
                            <el-select v-model="form.D012.itemValue" class="w240">
                                <el-option label="自住" value="1" />
                                <el-option label="出租" value="2" />
                            </el-select>
                        </td>
                    </tr> -->
                    <tr>
                        <td>是否全款房</td>
                        <td>
                            <el-select v-model="form.D012.itemValue" class="w240">
                                <el-option label="全款房" value="0" />
                                <el-option label="按揭已还清" value="1" />
                                <el-option label="按揭未还清" value="2" />
                                <el-option label="反按揭" value="3" />
                            </el-select>
                        </td>
                    </tr>
                    <tr v-if="form.D012.itemValue === '2'">
                        <td>房贷余额</td>
                        <td>
                            <el-input v-model="form.D014.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr v-if="form.D012.itemValue === '2'">
                        <td>月供金额</td>
                        <td>
                            <el-input v-model="form.D015.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr v-if="form.D012.itemValue === '2'">
                        <td>按揭期限(月)</td>
                        <td>
                            <el-input v-model="form.D016.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr v-if="form.D012.itemValue === '2'">
                        <td>个人住房按揭贷款抵押在银行已还款期数</td>
                        <td>
                            <el-input v-model="form.D017.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr v-if="form.D012.itemValue === '2'">
                        <td>还款方式</td>
                        <td>
                            <el-select v-model="form.D018.itemValue" class="w240">
                                <el-option label="等额本息" value="0" />
                                <el-option label="等额本金" value="1" />
                                <el-option label="先息后本" value="2" />
                            </el-select>
                        </td>
                    </tr>
                    <tr v-if="form.D012.itemValue === '2'">
                        <td>抵押贷款类型</td>
                        <td>
                            <el-select v-model="form.D019.itemValue" class="w240">
                                <el-option label="个人住房按揭贷款抵押在银行" value="1" />
                                <el-option label="消费(经营性)贷款抵押在银行" value="2" />
                                <el-option label="消费(经营性)贷款抵押在非银行机构" value="3" />
                            </el-select>
                        </td>
                    </tr>
            </table>
            <span slot="footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addCustomerHouseInfo, getCustomerHouseDetailInfo, exportCityList } from "@/api/system/customer";

export default {
    name: "EditCustomer",
    props: ['dialogHouse','paramsData'],
    data() {
        return {
            productData: {
                cusId: '',
                houseId: '',
                houseInfos: ''
            },
            provinceList: [],
            city1:{
                cityList: [],
                areaList: [],
            },
            city2:{
                cityList: [],
                areaList: [],
            },
            city3:{
                cityList: [],
                areaList: [],
            },
            city4:{
                cityList: [],
                areaList: [],
            },
            city5:{
                cityList: [],
                areaList: [],
            },
            city6:{
                cityList: [],
                areaList: [],
            },
            city7:{
                cityList: [],
                areaList: [],
            },

            // 表单校验
            rules: {},
            form: {
                D001:{ areaCode: '' },
                D002:{},
                D003:{},
                D004:{},
                D005:{},
                D006:{},
                D007:{},
                D008:{},
                D009:{},
                D010:{},
                D011:{},
                D012:{},
                D013:{},
                D014:{},
                D015:{},
                D016:{},
                D017:{},
                D018:{},
                D019:{},
                D020:{},
                D021:{},
                D022:{},
            },
            dataInfo: [],
            areaList: [],
        };
    },
    mounted() {
        this.productData.cusId = this.paramsData.cusId;
        this.productData.houseId = this.paramsData.houseId;
        // 获取省份列表
        this.getProvinceList();
        // 获取详情
        this.getInfo();
    },
    methods: {
        // 获取详情
        getInfo(){
            getCustomerHouseDetailInfo(this.productData.houseId).then(res => {
                this.productData.houseInfos = JSON.parse(JSON.stringify(res.data));
                let proData = res.data;
                for(let i=0;i<proData.length;i++){
                    if(proData[i].cityCode){
                        this.getCityList(2,proData[i].provinceCode,'edit',proData[i].itemCode);
                    }
                    // 区域下拉框多选字符串转数组
                    if(proData[i].areaCode){
                        this.getCityList(3,proData[i].cityCode,'edit',proData[i].itemCode);
                    }
                    this.form[proData[i].itemCode] = proData[i];
                }
            });
        },

        // 获取省份列表
        getProvinceList(){
            exportCityList({leveType: 1,parentId: ''}).then(res => {
                if(res.code === 'success'){
                    console.log(res.data, 22)
                    this.provinceList = res.data;
                }
            })
        },

        // 获取省市区
        getCityList(type,id, isprod, code){
            if(isprod === 'add'){
                if(type === 2){
                    switch(code){
                        case 'A006':
                            this.form.A006.cityCode = '';
                            this.form.A006.areaCode = '';
                            break;
                        case 'A007':
                            this.form.A007.cityCode = '';
                            this.form.A007.areaCode = '';
                            break;
                        case 'B003':
                            this.form.B003.cityCode = '';
                            this.form.B003.areaCode = '';
                            break;
                        case 'B029':
                            this.form.B029.cityCode = '';
                            this.form.B029.areaCode = '';
                            break;
                        case 'C010':
                            this.form.C010.cityCode = '';
                            this.form.C010.areaCode = '';
                            break;
                        case 'D001':
                            this.form.D001.cityCode = '';
                            this.form.D001.areaCode = '';
                            break;
                        case 'J001':
                            this.form.J001.cityCode = '';
                            this.form.J001.areaCode = '';
                            break;
                    }
                }else if(type === 3){
                    switch(code){
                        case 'A006':
                            this.form.A006.areaCode = '';
                            break;
                        case 'A007':
                            this.form.A007.areaCode = '';
                            break;
                        case 'B003':
                            this.form.B003.areaCode = '';
                            break;
                        case 'B029':
                            this.form.B029.areaCode = '';
                            break;
                        case 'C010':
                            this.form.C010.areaCode = '';
                            break;
                        case 'D001':
                            this.form.D001.areaCode = '';
                            break;
                        case 'J001':
                            this.form.J001.areaCode = '';
                            break;
                    }
                }
            }
            exportCityList({leveType: type,parentId: id}).then(res => {
                if(res.code === 'success'){
                    if(type === 2){
                        switch(code){
                            case 'A006':
                                this.city1.cityList = res.data;
                                break;
                            case 'A007':
                                this.city2.cityList = res.data;
                                break;
                            case 'B003':
                                this.city3.cityList = res.data;
                                break;
                            case 'B029':
                                this.city4.cityList = res.data;
                                break;
                            case 'C010':
                                this.city5.cityList = res.data;
                                break;
                            case 'D001':
                                this.city6.cityList = res.data;
                                break;
                            case 'J001':
                                this.city7.cityList = res.data;
                                break;
                        }
                    }else if(type === 3){
                        switch(code){
                            case 'A006':
                                this.city1.areaList = res.data;
                                break;
                            case 'A007':
                                this.city2.areaList = res.data;
                                break;
                            case 'B003':
                                this.city3.areaList = res.data;
                                break;
                            case 'B029':
                                this.city4.areaList = res.data;
                                break;
                            case 'C010':
                                this.city5.areaList = res.data;
                                break;
                            case 'D001':
                                this.city6.areaList = res.data;
                                break;
                            case 'J001':
                                this.city7.areaList = res.data;
                                break;
                        }
                    }

                    console.log(this.form.D001.areaCode,666)
                }
            });
        },
        
        /** 提交按钮 */
        submitForm: function() {
            let that = this;
            let houseInfos = [];
            for(let key in this.form){
                let item = this.form;
                let itemValue = item[key].itemValue || '';
                if(key === 'D001'){
                    itemValue = item[key].areaCode;
                }
                houseInfos.push(
                    {
                        "cityCode": item[key].cityCode || '',
                        "areaCode": item[key].areaCode || '',
                        "itemValue": itemValue,
                        "itemCode": key || '',
                        "provinceCode": item[key].provinceCode || '',
                    }
                )
            }
            
            this.productData.houseInfos = JSON.stringify(houseInfos);
            addCustomerHouseInfo(this.productData).then(response => {
                if (response.code === 'success') {
                    this.msgSuccess("修改成功");
                    this.close('edit')
                }
            });
        },
        
        /** 关闭按钮 */
        close(type) {
            if(type !== 'edit') {
                type = false;
            }
            this.$emit('closeHouse', type);
        },
        
    }
};
</script>
<style lang="scss">
    .houseBox{
        padding-top: 10px;
        .w300{
            width: 300px;
        }
        .w200{
            width: 200px;
        }
        .w240{
            width: 240px;
        }
        .w150{
            width: 150px;
        }
        .w180{
            width: 180px;
        }
        .w100{
            width: 100px;
        }
        table{
            margin: 0 auto;
            width: 100%;
        }
        table td {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #606266;
            line-height: 25px;
            font-size: 14px;
            padding: 5px 10px;
            border-bottom: 1px solid #dfe6ec;
        }
        table tr{
            border-bottom: 1px solid #dfe6ec;
        }

        .el-dialog__body{
            max-height: 720px;
            overflow-y: auto;
        }
    }
</style>